<template>
    <div id="heatmap" :style="{ height: boxheight + 'px', width: boxWidth + 'px' }"></div>
</template>

<script>
import heatmapjs from 'heatmapjs';
import { latLngToCoordinate, coordinateToPixelAddGray } from 'U/dataQueryFunc';
// import { getHeatMapVal } from 'S/thematicMap';
export default {
    name: 'heatMapDom',
    props: {
        beginColor: String,
        endColor: String,
        time: Object,
        geo: String,
        type: String,
    },
    data() {
        return {
            boxWidth: 0,
            boxheight: 0,
            latLngArr: [
                [93.07331608000001, 38.5151566],
                [93.07331608000001, 38.513656600000004],
                [93.07331608000001, 38.512156600000004],
                [93.07331608000001, 38.510656600000004],
                [93.07331608000001, 38.509156600000004],
                [93.07331608000001, 38.507656600000004],
                [93.07331608000001, 38.506156600000004],
                [93.07331608000001, 38.504656600000004],
                [93.07481608, 38.5151566],
                [93.07481608, 38.513656600000004],
                [93.07481608, 38.512156600000004],
                [93.07481608, 38.510656600000004],
                [93.07481608, 38.509156600000004],
                [93.07481608, 38.507656600000004],
                [93.07481608, 38.506156600000004],
                [93.07481608, 38.504656600000004],
                [93.07631608, 38.5151566],
                [93.07631608, 38.513656600000004],
                [93.07631608, 38.512156600000004],
                [93.07631608, 38.510656600000004],
                [93.07631608, 38.509156600000004],
                [93.07631608, 38.507656600000004],
                [93.07631608, 38.506156600000004],
                [93.07631608, 38.504656600000004],
                [93.07781608, 38.5151566],
                [93.07781608, 38.513656600000004],
                [93.07781608, 38.512156600000004],
                [93.07781608, 38.510656600000004],
                [93.07781608, 38.509156600000004],
                [93.07781608, 38.507656600000004],
                [93.07781608, 38.506156600000004],
                [93.07781608, 38.504656600000004],
            ],
            valArr: [
                1202,
                2149,
                1556,
                1573,
                1297,
                1420,
                1419,
                1569,
                1599,
                2043,
                1848,
                1528,
                1510,
                1534,
                1395,
                1443,
                1712,
                1497,
                1587,
                1610,
                1778,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
            ],
        };
    },
    methods: {
        setBoxWH({
            borderDis = Number(($('#themetic-canvas').offsetWidth - $('.img_box').offsetWidth) / 2),
            contentName = 'contentId',
        }) {
            this.boxWidth = $(`#${contentName}`).width() - 4 * borderDis;
            this.boxheight = $(`#${contentName}`).height() - 2 * borderDis;
            this.$nextTick(() => {
                this.init();
            });
        },
        async init() {
            // 创建一个heatmap实例对象
            // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
            this.heatmapInstance = heatmapjs.create({
                container: document.querySelector('#heatmap'),
                defaultGradient: {
                    0: this.beginColor,
                    1: this.endColor,
                },
            });

            // 构建一些随机数据点,网页切图价格这里替换成你的业务数据
            // let points = [];

            // let width = document.body.clientWidth;
            // let height = document.body.clientHeight;
            // let len = 300;
            // while (len--) {
            //     let val = Math.floor(Math.random() * 100);
            //     max = Math.max(max,val);
            //     min = Math.min(min,val);
            //     let point = {
            //         x: Math.floor(Math.random() * width),
            //         y: Math.floor(Math.random() * height),
            //         value: val,
            //     };
            //     points.push(point);
            // }

            // let parm = {
            //     geo: this.geo,
            //     time: this.time,
            //     type: this.type,
            // };
            // let res = await getHeatMapVal(parm);
            // let latLngArr = res.latLngArr; // 经纬度
            // let valArr = res.valArr; // 灰度值

            let lngArr = [];
            let latArr = [];
            this.latLngArr.forEach(item => {
                lngArr.push(item[0]);
                latArr.push(item[1]);
            });
            let maxLng = Math.max(...lngArr);
            let minLng = Math.min(...lngArr);
            let maxLat = Math.max(...latArr);
            let minLat = Math.min(...latArr);
            let leftTopPoint = { lng: minLng, lat: maxLat };
            let rightBotPoint = { lng: maxLng, lat: minLat };
            console.log(leftTopPoint, rightBotPoint);
            let latLngArr = this.latLngArr;
            let valArr = this.valArr;
            let coordinates = latLngToCoordinate(latLngArr);
            let points = coordinateToPixelAddGray(coordinates, valArr);
            let max = Math.max(...valArr);
            let min = Math.min(...valArr);
            let data = {
                max: max, // max值表示数据中参数最大的一个，也可以说是热力图中颜色最深的一个，是一个标准
                data: points,
            };
            // 因为data是一组数据,web切图报价所以直接setData
            this.heatmapInstance.setData(data); // 数据绑定还可以使用
            // 提交给图例组件，构建图例
            this.$emit('initLegend', max, min);
        },
        // 颜色修改
        changeColor() {
            $('#heatmap').empty();
            this.init();
        },
    },
};
</script>

<style scoped>
#heatmap {
    position: absolute !important;
    z-index: 1;
}
</style>
